<template>
  <!-- 新增编辑租机订单详情 -->
  <AddEditInfo v-show="['edit', 'add'].includes(formStatus)" :id="id" :provinceList="provinceList" :selectPlatformType="selectPlatformType" v-model:formStatus="formStatus" @handleInitData="cancelSubmit" @handleSuccess="handleSuccess" />
  <!-- 查看租机订单详情 -->
  <ViewInfo v-show="formStatus === 'view'" :id="id" v-model:formStatus="formStatus" @handleInitData="cancelSubmit" />
</template>

<script setup lang="ts">
import AddEditInfo from "@/components/rentMachineManage/rentMachineOrderInfo/formtab/AddEditInfo.vue";
import ViewInfo from "@/components/rentMachineManage/rentMachineOrderInfo/formtab/ViewInfo.vue";
import type { postOrPutType } from "@/constants";
import type { ViewMode } from "@/types/common";
import type { IDictData } from "@/types/dict";
import type { IRegion } from "@/types/redPacketMallManage/region";
interface Props {
  id: number;
  selectPlatformType: Array<IDictData>;
  provinceList: Array<IRegion>;
}
const { id, selectPlatformType } = defineProps<Props>();

const formStatus = defineModel<ViewMode>("formStatus", { required: true });
const emit = defineEmits<{
  handleInitData: [];
  handleSuccess: [];
}>();

const isDisabledbtn = ref(false);
const methodType = ref<postOrPutType>("PUT");

/* formStatus处理器 */
const statusHandlers: Record<ViewMode, () => void> = {
  view: () => {
    isDisabledbtn.value = true;
  },
  edit: () => {
    methodType.value = "PUT";
  },
  add: () => {
    methodType.value = "POST";
  },
  none: () => {
    /* 初始化数据 */
    handleInitData();
  }
};
/* 监听formStatus,新增，编辑，查看的时候都可以打开模态框，又是有不同的操作和效果，需要单独判断，none为模态框关闭的情况，需要初始化数据 */
watch(formStatus, newValue => {
  const handler = statusHandlers[newValue];
  handler?.();
});
/*  */

/* 初始化数据 */
function handleInitData() {}

/* 保存或编辑 取消提交 */
function cancelSubmit() {
  emit("handleInitData");
}

/* 保存,编辑成功 */
function handleSuccess() {
  emit("handleSuccess");
}
</script>

<style lang="scss" scoped>
/* 修改select的盒模型 */
.el-select {
  display: block;
}
/* 底部按钮居中 */
.footer-center {
  margin: 10px 0;
  text-align: center;
}

.img-item {
  width: 100px;
  height: 100px;
  margin-right: 10px;
}
</style>
